<template>
	<div>
		<!-- 头部搜索区域 -->
		<div class="header-search">
			<div>
				<Select style="width:200px;margin-right: 20px;" placeholder="所有标签" @on-change="labelchange">
					<Option v-for="item in labelList" :value="item.label" :key="item.id">{{ item.label }}</Option>
				</Select>
				<Input class="input" v-model="mobileSearch" placeholder="用户手机号" clearable />
				<Button type="primary" icon="ios-search" @click="search">搜索</Button>
			</div>
			<span style="font-size: 16px;cursor: pointer;" @click="labelSet"><Icon type="md-planet" style="font-size: 20px; margin: -3px 5px 0 0;" />标签管理</span>
		</div>
		<br /><br />
		<!-- 用户信息列表 -->
		<Table border :columns="columns1" :data="articleList"></Table>
		<!-- 分页 -->
		<br /><br />
		<div style="text-align: center;">
			<Page :total="total" show-sizer show-elevator  @on-change="changePage"/>
		</div>
	</div>
</template>
<script>
	import path from '@/api/path.js';
	let url = path.url;
	import axios from '@/libs/api.request';
	export default {
		name: 'level_1',
		data() {
			return {
				mobileSearch: "",
				labelList: this.$store.state.articleLabel,
				labelValue: '',
				columns1: [
					{   
						title: '编号',
						key: 'id',
						width: 100,
						align: 'center'
					},
					{
						title: '发布者',
						key: 'name',
						width: 100,
						align: 'center'
					},
					{
						title: '标签',
						key: 'label',
						align: 'center'
					},
					{
						title: '创建时间',
						key: 'createTime',
						align: 'center'
					},
					{
						title: '内容图片',
						key: 'avatar',
						width: 150,
						align: 'center',
						columns: {
							'width': '50px'
						},
						render: (h, params) => {
							return h('div', [
								h('img', {
									attrs: {
										src: params.row.pictureArray
									},
									style: {
										width: '40px',
										height: '40px'
									}
								}),
							]);
						}
					},
					{
						title: '评论数',
						key: 'commentCount',
						width: 100,
						align: 'center'
					},
					{
						title: '点赞数',
						width: 100,
						key: 'collectCount',
						align: 'center'
					},
					{
						title: '操作',
						key: 'action',
						width: 250,
						align: 'center',
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginRight: '10px'
									},
									on: {
										click: (e) => {
											this.goDetail(params.row);
										}
									}
								}, '查看详情'),
								 h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
											this.delect(params.row)
                                        }
                                    }
                                }, '删除')
							]);
						}
					}
				],
				articleList: [],
				total: 0,
				page: 1
			}
		},
		methods: {
			// 标签管理
			labelSet(){
				this.$router.push('circle/label')
			},
			// 获取装修圈列表
			getArticleList() {
				axios.request({
					url: `${url}Article/getArticleList`,
					method: 'post',
					data: {
						page: this.page,
						label: this.labelValue,
						mobile: this.mobileSearch
						}
				}).then(res => {
					if (res.data.status == 1) {
						this.articleList = res.data.content.data;
						this.total = res.data.content.total;
					} else {
						throw '获取数据失败！'
					}
				})
			},
			// 页面跳转
			changePage(idx){
				this.page = idx;
				this.getArticleList();
			},
			// 接收标签数据
			labelchange(val){
				this.labelValue = val;
			},
			// 搜索
			search(){
				this.getArticleList();
			},
			// 删除
			delect(obj){
				console.log(obj);
				axios.request({
					url: `${url}Article/delArticle`,
					method: 'post',
					data: {
						id: obj.id
					}
				}).then(res=>{
					console.log(res);
					if ( res.data.status == 1 ) {
						this.getArticleList();
					} else {
						throw '删除失败！'
					}
				})
			},
			// 查看详情
			goDetail(obj) {
				if (obj) {
					this.$router.push({
						name: 'circleDetail',
						query: {
							id: obj.id
						}
					});
				} else {
					this.$router.push({
						name: '/'
					});
				}
			},
		},
		created() {
			this.getArticleList();
			this.$store.commit('getLabelList');
		}
	}
</script>
<style scoped="scoped">
	.header-search {
		display: flex;
		justify-content: space-between;
	}
	.input {
		width: 200px;
		margin-right: 20px;
	}
</style>
